<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>项目配置项 | Vben Admin</title>
    <meta name="description" content="一个开箱即用的前端框架">
    <link rel="stylesheet" href="/doc-next/assets/style.ffd1e42f.css">
    <link rel="modulepreload" href="/doc-next/assets/Home.43e6fab2.js">
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js">
    <link rel="modulepreload" href="/doc-next/assets/guide_settings.md.15dd5414.lean.js">
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js">
    <meta name="author" content="Vbenjs Team">
    <meta name="keywords" content="vben, vitejs, vite, ant-design-vue, vue">
    <link rel="icon" type="image/svg+xml" href="/logo.svg">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="vue vben admin docs">
    <link rel="icon" href="/favicon.ico">
    <meta name="twitter:title" content="项目配置项 | Vben Admin">
    <meta property="og:title" content="项目配置项 | Vben Admin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-172e455d><div class="sidebar-button" data-v-172e455d><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/doc-next/" aria-label="Vben Admin, back to home" data-v-172e455d data-v-dc837cb8><img class="logo" src="/doc-next/logo.png" alt="Logo" data-v-dc837cb8> Vben Admin</a><div class="flex-grow" data-v-172e455d></div><div class="nav" data-v-172e455d><nav class="nav-links" data-v-172e455d data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>指南</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>指南</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>深入</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/other/faq" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>其他</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>组件</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>介绍</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>全局组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/basic" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>常用组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/functional/context-menu" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>函数式组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>相关链接</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://discord.gg/8GuAdwDhj6" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>Discord Chat</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/thin/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vben-admin-thin-next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin-doc" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>文档源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>更新日志</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-5d86132c><a class="item" href="/doc-next/other/donate" data-v-5d86132c>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-172e455d><div class="item" data-v-172e455d><button class="nav-btn" aria-label="Toggle Theme" data-v-172e455d><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display: none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><div class="item" data-v-172e455d><a class="nav-btn" href="https://github.com/anncwb/vue-vben-admin" target="_blank" aria-label="View GitHub Repo" data-v-172e455d><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-172e455d><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" fill="currentColor"></path></svg></a></div></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-3e48a26e><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>指南</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>指南</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>深入</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/other/faq" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>其他</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>组件</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>介绍</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>全局组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/basic" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>常用组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item" href="/doc-next/components/functional/context-menu" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>函数式组件</span><span class="icon" data-v-5354c4e6><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792><button class="button" data-v-d0aba792><span class="button-text" data-v-d0aba792>相关链接</span><span class="right button-arrow" data-v-d0aba792></span></button><ul class="dialog" data-v-d0aba792><!--[--><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://discord.gg/8GuAdwDhj6" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>Discord Chat</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>完整版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://vvbin.cn/thin/next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版预览</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vben-admin-thin-next" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>精简版源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin-doc" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>文档源码</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-d0aba792><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6><a class="item isExternal" href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5354c4e6><span class="arrow" data-v-5354c4e6></span><span class="text" data-v-5354c4e6>更新日志</span><span class="icon" data-v-5354c4e6><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5354c4e6><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-5d86132c><a class="item" href="/doc-next/other/donate" data-v-5d86132c>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e><!--[--><li class="sidebar-link"><p class="sidebar-link-item">指南</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/introduction">介绍</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/">开始</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/doc-next/guide/settings">项目配置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#环境变量配置">环境变量配置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#配置项说明">配置项说明</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#env">.env</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#env-development">.env.development</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#env-production">.env.production</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#生产环境动态配置">生产环境动态配置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#说明">说明</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#作用">作用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#如何获取全局变量">如何获取全局变量</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#如何新增-新增一个可动态修改的配置项">如何新增(新增一个可动态修改的配置项)</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#项目配置">项目配置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#配置文件路径">配置文件路径</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#说明-1">说明</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#缓存配置">缓存配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#多语言配置">多语言配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#主题色配置">主题色配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#样式配置">样式配置</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#css-前缀设置">css 前缀设置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#前缀使用">前缀使用</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#颜色配置">颜色配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#组件默认参数配置">组件默认参数配置</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/router">路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/menu">菜单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/auth">权限</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/mock">Mock&amp;联调</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/component">组件注册</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/design">样式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/lib">外部模块</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/deploy">构建&amp;部署</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/guide/electron">Electron</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">深入</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/cors">跨域处理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/icon">图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/i18n">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/lint">项目规范</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/dep/dark">黑暗主题</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">其他</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/other/faq">常见问题</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/other/doubt">常见疑点</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/doc-next/other/server">测试服务</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4c107763><div class="container" data-v-4c107763><!--[--><!--]--><div class="content" data-v-4c107763><div data-v-4c107763><h1 id="项目配置项"><a class="header-anchor" href="#项目配置项" aria-hidden="true">#</a> 项目配置项</h1><p>用于修改项目的配色、布局、缓存、多语言、组件默认配置</p><h2 id="环境变量配置"><a class="header-anchor" href="#环境变量配置" aria-hidden="true">#</a> 环境变量配置</h2><p>项目的环境变量配置位于项目根目录下的 <a href="https://github.com/anncwb/vue-vben-admin/blob/main/.env" target="_blank" rel="noopener noreferrer">.env</a>、<a href="https://github.com/anncwb/vue-vben-admin/blob/main/.env.development" target="_blank" rel="noopener noreferrer">.env.development</a>、<a href="https://github.com/anncwb/vue-vben-admin/blob/main/.env.production" target="_blank" rel="noopener noreferrer">.env.production</a></p><p>具体可以参考 <a href="https://github.com/vitejs/vite#modes-and-environment-variables" target="_blank" rel="noopener noreferrer">Vite 文档</a></p><div class="language-bash"><pre><code>.env                <span class="token comment"># 在所有的环境中被载入</span>
.env.local          <span class="token comment"># 在所有的环境中被载入，但会被 git 忽略</span>
.env.<span class="token punctuation">[</span>mode<span class="token punctuation">]</span>         <span class="token comment"># 只在指定的模式中被载入</span>
.env.<span class="token punctuation">[</span>mode<span class="token punctuation">]</span>.local   <span class="token comment"># 只在指定的模式中被载入，但会被 git 忽略</span>

</code></pre></div><div class="tip custom-block"><p class="custom-block-title">温馨提醒</p><ul><li>只有以 <code>VITE_ </code> 开头的变量会被嵌入到客户端侧的包中，你可以项目代码中这样访问它们：</li></ul><div class="language-js"><pre><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VITE_PROT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>以 <code>VITE_GLOB_*</code> 开头的的变量，在打包的时候，会被加入<a href="#%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE">_app.config.js</a>配置文件当中.</li></ul></div><h3 id="配置项说明"><a class="header-anchor" href="#配置项说明" aria-hidden="true">#</a> 配置项说明</h3><h3 id="env"><a class="header-anchor" href="#env" aria-hidden="true">#</a> .env</h3><p>所有环境适用</p><div class="language-bash"><pre><code><span class="token comment"># 端口号</span>
<span class="token assign-left variable">VITE_PORT</span><span class="token operator">=</span><span class="token number">3100</span>
<span class="token comment"># 网站标题</span>
<span class="token assign-left variable">VITE_GLOB_APP_TITLE</span><span class="token operator">=</span>vben admin
<span class="token comment"># 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符</span>
<span class="token assign-left variable">VITE_GLOB_APP_SHORT_NAME</span><span class="token operator">=</span>vben_admin
</code></pre></div><h3 id="env-development"><a class="header-anchor" href="#env-development" aria-hidden="true">#</a> .env.development</h3><p>开发环境适用</p><div class="language-bash"><pre><code><span class="token comment"># 是否开启mock数据，关闭时需要自行对接后台接口</span>
<span class="token assign-left variable">VITE_USE_MOCK</span><span class="token operator">=</span>true
<span class="token comment"># 资源公共路径,需要以 /开头和结尾</span>
<span class="token assign-left variable">VITE_PUBLIC_PATH</span><span class="token operator">=</span>/
<span class="token comment"># 是否删除Console.log</span>
<span class="token assign-left variable">VITE_DROP_CONSOLE</span><span class="token operator">=</span>false
<span class="token comment"># 本地开发代理，可以解决跨域及多地址代理</span>
<span class="token comment"># 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题</span>
<span class="token comment"># 可以有多个，注意多个不能换行，否则代理将会失效</span>
<span class="token assign-left variable">VITE_PROXY</span><span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">&quot;/api&quot;</span>,<span class="token string">&quot;http://localhost:3000&quot;</span><span class="token punctuation">]</span>,<span class="token punctuation">[</span><span class="token string">&quot;api1&quot;</span>,<span class="token string">&quot;http://localhost:3001&quot;</span><span class="token punctuation">]</span>,<span class="token punctuation">[</span><span class="token string">&quot;/upload&quot;</span>,<span class="token string">&quot;http://localhost:3001/upload&quot;</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
<span class="token comment"># 接口地址</span>
<span class="token comment"># 如果没有跨域问题，直接在这里配置即可</span>
<span class="token assign-left variable">VITE_GLOB_API_URL</span><span class="token operator">=</span>/api
<span class="token comment"># 文件上传接口  可选</span>
<span class="token assign-left variable">VITE_GLOB_UPLOAD_URL</span><span class="token operator">=</span>/upload
<span class="token comment"># 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换</span>
<span class="token assign-left variable">VITE_GLOB_API_URL_PREFIX</span><span class="token operator">=</span>
</code></pre></div><div class="warning custom-block"><p class="custom-block-title">注意</p><p>这里配置的 <code>VITE_PROXY</code> 以及 <code>VITE_GLOB_API_URL</code>, /api 需要是唯一的，不要和接口有的名字冲突</p><p>如果你的接口是 <code>http://localhost:3000/api</code> 之类的，请考虑将 <code>VITE_GLOB_API_URL=/xxxx</code> 换成别的名字</p></div><h3 id="env-production"><a class="header-anchor" href="#env-production" aria-hidden="true">#</a> .env.production</h3><p>生产环境适用</p><div class="language-bash"><pre><code><span class="token comment"># 是否开启mock</span>
<span class="token assign-left variable">VITE_USE_MOCK</span><span class="token operator">=</span>true
<span class="token comment"># 接口地址 可以由nginx做转发或者直接写实际地址</span>
<span class="token assign-left variable">VITE_GLOB_API_URL</span><span class="token operator">=</span>/api
<span class="token comment"># 文件上传地址 可以由nginx做转发或者直接写实际地址</span>
<span class="token assign-left variable">VITE_GLOB_UPLOAD_URL</span><span class="token operator">=</span>/upload
<span class="token comment"># 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换</span>
<span class="token assign-left variable">VITE_GLOB_API_URL_PREFIX</span><span class="token operator">=</span>
<span class="token comment"># 是否删除Console.log</span>
<span class="token assign-left variable">VITE_DROP_CONSOLE</span><span class="token operator">=</span>true
<span class="token comment"># 资源公共路径,需要以 / 开头和结尾</span>
<span class="token assign-left variable">VITE_PUBLIC_PATH</span><span class="token operator">=</span>/
<span class="token comment"># 打包是否输出gz｜br文件</span>
<span class="token comment"># 可选: gzip | brotli | none</span>
<span class="token comment"># 也可以有多个, 例如 ‘gzip’|&#39;brotli&#39;,这样会同时生成 .gz和.br文件</span>
VITE_BUILD_COMPRESS <span class="token operator">=</span> <span class="token string">&#39;gzip&#39;</span>
<span class="token comment"># 打包是否压缩图片</span>
VITE_USE_IMAGEMIN <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token comment"># 打包是否开启pwa功能</span>
VITE_USE_PWA <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token comment"># 是否兼容旧版浏览器。开启后打包时间会慢一倍左右。会多打出旧浏览器兼容包,且会根据浏览器兼容性自动使用相应的版本</span>
VITE_LEGACY <span class="token operator">=</span> <span class="token boolean">false</span>
</code></pre></div><h2 id="生产环境动态配置"><a class="header-anchor" href="#生产环境动态配置" aria-hidden="true">#</a> 生产环境动态配置</h2><h3 id="说明"><a class="header-anchor" href="#说明" aria-hidden="true">#</a> 说明</h3><p>当执行<code>yarn build</code>构建项目之后，会自动生成 <code>_app.config.js</code> 文件并插入 <code>index.html</code>。</p><p><strong>注意: 开发环境不会生成</strong></p><div class="language-js"><pre><code><span class="token comment">// _app.config.js</span>
<span class="token comment">// 变量名命名规则  __PRODUCTION__xxx_CONF__   xxx：为.env配置的VITE_GLOB_APP_SHORT_NAME</span>
window<span class="token punctuation">.</span>__PRODUCTION__VUE_VBEN_ADMIN__CONF__ <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token constant">VITE_GLOB_APP_TITLE</span><span class="token operator">:</span> <span class="token string">&#39;vben admin&#39;</span><span class="token punctuation">,</span>
  <span class="token constant">VITE_GLOB_APP_SHORT_NAME</span><span class="token operator">:</span> <span class="token string">&#39;vue_vben_admin&#39;</span><span class="token punctuation">,</span>
  <span class="token constant">VITE_GLOB_API_URL</span><span class="token operator">:</span> <span class="token string">&#39;/app&#39;</span><span class="token punctuation">,</span>
  <span class="token constant">VITE_GLOB_API_URL_PREFIX</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span>
  <span class="token constant">VITE_GLOB_UPLOAD_URL</span><span class="token operator">:</span> <span class="token string">&#39;/upload&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="作用"><a class="header-anchor" href="#作用" aria-hidden="true">#</a> 作用</h3><p><code>_app.config.js</code> 用于项目在打包后，需要动态修改配置的需求，如接口地址。不用重新进行打包，可在打包后修改 <code>/dist/_app.config.js</code> 内的变量，刷新即可更新代码内的局部变量。</p><h3 id="如何获取全局变量"><a class="header-anchor" href="#如何获取全局变量" aria-hidden="true">#</a> 如何获取全局变量</h3><p>想要获取 <code>_app.config.js</code> 内的变量，可以使用 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/hooks/setting/index.ts" target="_blank" rel="noopener noreferrer">src/hooks/setting/index.ts</a> 提供的函数来进行获取</p><h3 id="如何新增-新增一个可动态修改的配置项"><a class="header-anchor" href="#如何新增-新增一个可动态修改的配置项" aria-hidden="true">#</a> 如何新增(新增一个可动态修改的配置项)</h3><ol><li><p>首先在 <code>.env</code> 或者对应的开发环境配置文件内，新增需要可动态配置的变量，需要以 <code>VITE_GLOB_</code>开头</p></li><li><p><code>VITE_GLOB_</code> 开头的变量会自动加入环境变量，通过在 <code>src/types/config.d.ts</code> 内修改 <code>GlobEnvConfig</code> 和 <code>GlobConfig</code> 两个环境变量的值来定义新添加的类型</p></li><li><p><a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/hooks/setting/index.ts" target="_blank" rel="noopener noreferrer">useGlobSetting</a> 函数中添加刚新增的返回值即可</p></li></ol><div class="language-js"><pre><code><span class="token keyword">const</span> <span class="token punctuation">{</span>
  <span class="token constant">VITE_GLOB_APP_TITLE</span><span class="token punctuation">,</span>
  <span class="token constant">VITE_GLOB_API_URL</span><span class="token punctuation">,</span>
  <span class="token constant">VITE_GLOB_APP_SHORT_NAME</span><span class="token punctuation">,</span>
  <span class="token constant">VITE_GLOB_API_URL_PREFIX</span><span class="token punctuation">,</span>
  <span class="token constant">VITE_GLOB_UPLOAD_URL</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token constant">ENV</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> useGlobSetting <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token parameter">SettingWrap</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// Take global configuration</span>
  <span class="token keyword">const</span> glob<span class="token operator">:</span> Readonly<span class="token operator">&lt;</span>GlobConfig<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    title<span class="token operator">:</span> <span class="token constant">VITE_GLOB_APP_TITLE</span><span class="token punctuation">,</span>
    apiUrl<span class="token operator">:</span> <span class="token constant">VITE_GLOB_API_URL</span><span class="token punctuation">,</span>
    shortName<span class="token operator">:</span> <span class="token constant">VITE_GLOB_APP_SHORT_NAME</span><span class="token punctuation">,</span>
    urlPrefix<span class="token operator">:</span> <span class="token constant">VITE_GLOB_API_URL_PREFIX</span><span class="token punctuation">,</span>
    uploadUrl<span class="token operator">:</span> <span class="token constant">VITE_GLOB_UPLOAD_URL</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> glob <span class="token keyword">as</span> Readonly<span class="token operator">&lt;</span>GlobConfig<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

</code></pre></div><h2 id="项目配置"><a class="header-anchor" href="#项目配置" aria-hidden="true">#</a> 项目配置</h2><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>项目配置文件用于配置项目内展示的内容、布局、文本等效果，存于<code>localStorage</code>中。如果更改了项目配置，需要手动<strong>清空</strong> <code>localStorage</code> 缓存，刷新重新登录后方可生效。</p></div><h3 id="配置文件路径"><a class="header-anchor" href="#配置文件路径" aria-hidden="true">#</a> 配置文件路径</h3><p><a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/settings/projectSetting.ts" target="_blank" rel="noopener noreferrer">src/settings/projectSetting.ts</a></p><h3 id="说明-1"><a class="header-anchor" href="#说明-1" aria-hidden="true">#</a> 说明</h3><div class="language-js"><pre><code><span class="token comment">// ! 改动后需要清空浏览器缓存</span>
<span class="token keyword">const</span> setting<span class="token operator">:</span> ProjectConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 是否显示SettingButton</span>
  showSettingButton<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>

  <span class="token comment">// 是否显示主题切换按钮</span>
  showDarkModeToggle<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>

  <span class="token comment">// 设置按钮位置 可选项</span>
  <span class="token comment">// SettingButtonPositionEnum.AUTO: 自动选择</span>
  <span class="token comment">// SettingButtonPositionEnum.HEADER: 位于头部</span>
  <span class="token comment">// SettingButtonPositionEnum.FIXED: 固定在右侧</span>
  settingButtonPosition<span class="token operator">:</span> SettingButtonPositionEnum<span class="token punctuation">.</span><span class="token constant">AUTO</span><span class="token punctuation">,</span>

  <span class="token comment">// 权限模式,默认前端角色权限模式</span>
  <span class="token comment">// ROUTE_MAPPING: 前端模式（菜单由路由生成，默认）</span>
  <span class="token comment">// ROLE：前端模式（菜单路由分开）</span>
  permissionMode<span class="token operator">:</span> PermissionModeEnum<span class="token punctuation">.</span><span class="token constant">ROUTE_MAPPING</span><span class="token punctuation">,</span>
  <span class="token comment">// 权限缓存存放位置。默认存放于localStorage</span>
  permissionCacheType<span class="token operator">:</span> CacheTypeEnum<span class="token punctuation">.</span><span class="token constant">LOCAL</span><span class="token punctuation">,</span>
  <span class="token comment">// 会话超时处理方案</span>
  <span class="token comment">// SessionTimeoutProcessingEnum.ROUTE_JUMP: 路由跳转到登录页</span>
  <span class="token comment">// SessionTimeoutProcessingEnum.PAGE_COVERAGE: 生成登录弹窗，覆盖当前页面</span>
  sessionTimeoutProcessing<span class="token operator">:</span> SessionTimeoutProcessingEnum<span class="token punctuation">.</span><span class="token constant">ROUTE_JUMP</span><span class="token punctuation">,</span>
  <span class="token comment">// 项目主题色</span>
  themeColor<span class="token operator">:</span> primaryColor<span class="token punctuation">,</span>
  <span class="token comment">// 网站灰色模式，用于可能悼念的日期开启</span>
  grayMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token comment">// 色弱模式</span>
  colorWeak<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token comment">// 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内</span>
  fullContent<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token comment">// 主题内容宽度</span>
  contentMode<span class="token operator">:</span> ContentEnum<span class="token punctuation">.</span><span class="token constant">FULL</span><span class="token punctuation">,</span>
  <span class="token comment">// 是否显示logo</span>
  showLogo<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 是否显示底部信息 copyright</span>
  showFooter<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 头部配置</span>
  headerSetting<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 背景色</span>
    bgColor<span class="token operator">:</span> <span class="token string">&#39;#ffffff&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">// 固定头部</span>
    fixed<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否显示顶部</span>
    show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 主题</span>
    theme<span class="token operator">:</span> MenuThemeEnum<span class="token punctuation">.</span><span class="token constant">LIGHT</span><span class="token punctuation">,</span>
    <span class="token comment">// 开启锁屏功能</span>
    useLockPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 显示全屏按钮</span>
    showFullScreen<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 显示文档按钮</span>
    showDoc<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 显示消息中心按钮</span>
    showNotice<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 显示菜单搜索按钮</span>
    showSearch<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 菜单配置</span>
  menuSetting<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 背景色</span>
    bgColor<span class="token operator">:</span> <span class="token string">&#39;#273352&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否固定住菜单</span>
    fixed<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单折叠</span>
    collapsed<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 折叠菜单时候是否显示菜单名</span>
    collapsedShowTitle<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否可拖拽</span>
    canDrag<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否显示</span>
    show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单宽度</span>
    menuWidth<span class="token operator">:</span> <span class="token number">180</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单模式</span>
    mode<span class="token operator">:</span> MenuModeEnum<span class="token punctuation">.</span><span class="token constant">INLINE</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单类型</span>
    type<span class="token operator">:</span> MenuTypeEnum<span class="token punctuation">.</span><span class="token constant">SIDEBAR</span><span class="token punctuation">,</span>
    <span class="token comment">// 菜单主题</span>
    theme<span class="token operator">:</span> MenuThemeEnum<span class="token punctuation">.</span><span class="token constant">DARK</span><span class="token punctuation">,</span>
    <span class="token comment">// 分割菜单</span>
    split<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 顶部菜单布局</span>
    topMenuAlign<span class="token operator">:</span> <span class="token string">&#39;start&#39;</span><span class="token punctuation">,</span>
    <span class="token comment">// 折叠触发器的位置</span>
    trigger<span class="token operator">:</span> TriggerEnum<span class="token punctuation">.</span><span class="token constant">HEADER</span><span class="token punctuation">,</span>
    <span class="token comment">// 手风琴模式，只展示一个菜单</span>
    accordion<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 在路由切换的时候关闭左侧混合菜单展开菜单</span>
    closeMixSidebarOnChange<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 左侧混合菜单模块切换触发方式</span>
    mixSideTrigger<span class="token operator">:</span> MixSidebarTriggerEnum<span class="token punctuation">.</span><span class="token constant">CLICK</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否固定左侧混合菜单</span>
    mixSideFixed<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 多标签</span>
  multiTabsSetting<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 刷新后是否保留已经打开的标签页</span>
    cache<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token comment">// 开启</span>
    show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 开启快速操作</span>
    showQuick<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否可以拖拽</span>
    canDrag<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否显示刷新那妞</span>
    showRedo<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否显示折叠按钮</span>
    showFold<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 动画配置</span>
  transitionSetting<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//  是否开启切换动画</span>
    enable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 动画名</span>
    basicTransition<span class="token operator">:</span> RouterTransitionEnum<span class="token punctuation">.</span><span class="token constant">FADE_SIDE</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否打开页面切换loading</span>
    openPageLoading<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">//是否打开页面切换顶部进度条</span>
    openNProgress<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 是否开启KeepAlive缓存  开发时候最好关闭,不然每次都需要清除缓存</span>
  openKeepAlive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 自动锁屏时间，为0不锁屏。 单位分钟 默认1个小时</span>
  lockTime<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  <span class="token comment">// 显示面包屑</span>
  showBreadCrumb<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 显示面包屑图标</span>
  showBreadCrumbIcon<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token comment">// 是否使用全局错误捕获</span>
  useErrorHandle<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token comment">// 是否开启回到顶部</span>
  useOpenBackTop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">//  是否可以嵌入iframe页面</span>
  canEmbedIFramePage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 切换界面的时候是否删除未关闭的message及notify</span>
  closeMessageOnSwitch<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 切换界面的时候是否取消已经发送但是未响应的http请求。</span>
  <span class="token comment">// 如果开启,想对单独接口覆盖。可以在单独接口设置</span>
  removeAllHttpPending<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="缓存配置"><a class="header-anchor" href="#缓存配置" aria-hidden="true">#</a> 缓存配置</h2><p>用于配置缓存内容加密信息，对缓存到浏览器的信息进行 AES 加密</p><p>在 <a href="https://github.com/anncwb/vue-vben-admin/blob/main/src/settings/encryptionSetting.ts" target="_blank" rel="noopener noreferrer">/@/settings/encryptionSetting.ts</a> 内可以配置 <code>localStorage</code> 及 <code>sessionStorage</code> 缓存信息</p><p><strong>前提:</strong> 使用项目自带的缓存工具类 <a href="https://github.com/anncwb/vue-vben-admin/blob/main/src/utils/cache/index.ts" target="_blank" rel="noopener noreferrer">/@/utils/cache</a> 来进行缓存操作</p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> isDevMode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/utils/env&#39;</span><span class="token punctuation">;</span>

<span class="token comment">// 缓存默认过期时间</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">DEFAULT_CACHE_TIME</span> <span class="token operator">=</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">7</span><span class="token punctuation">;</span>

<span class="token comment">// 开启缓存加密后，加密密钥。采用aes加密</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> cacheCipher <span class="token operator">=</span> <span class="token punctuation">{</span>
  key<span class="token operator">:</span> <span class="token string">&#39;_11111000001111@&#39;</span><span class="token punctuation">,</span>
  iv<span class="token operator">:</span> <span class="token string">&#39;@11111000001111_&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 是否加密缓存，默认生产环境加密</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> enableStorageEncryption <span class="token operator">=</span> <span class="token operator">!</span><span class="token function">isDevMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="多语言配置"><a class="header-anchor" href="#多语言配置" aria-hidden="true">#</a> 多语言配置</h2><p>用于配置多语言信息</p><p>在 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/settings/localeSetting.ts" target="_blank" rel="noopener noreferrer">src/settings/localeSetting.ts</a> 内配置</p><div class="language-ts"><pre><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">LOCALE</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> LocaleType <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token constant">ZH_CN</span><span class="token operator">:</span> <span class="token string">&#39;zh_CN&#39;</span><span class="token punctuation">,</span>
  <span class="token constant">EN_US</span><span class="token operator">:</span> <span class="token string">&#39;en&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> localeSetting<span class="token operator">:</span> LocaleSetting <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 是否显示语言选择器</span>
  showPicker<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 当前语言</span>
  locale<span class="token operator">:</span> <span class="token constant">LOCALE</span><span class="token punctuation">.</span><span class="token constant">ZH_CN</span><span class="token punctuation">,</span>
  <span class="token comment">// 默认语言</span>
  fallback<span class="token operator">:</span> <span class="token constant">LOCALE</span><span class="token punctuation">.</span><span class="token constant">ZH_CN</span><span class="token punctuation">,</span>
  <span class="token comment">// 允许的语言</span>
  availableLocales<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token constant">LOCALE</span><span class="token punctuation">.</span><span class="token constant">ZH_CN</span><span class="token punctuation">,</span> <span class="token constant">LOCALE</span><span class="token punctuation">.</span><span class="token constant">EN_US</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 语言列表</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> localeList<span class="token operator">:</span> DropMenu<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    text<span class="token operator">:</span> <span class="token string">&#39;简体中文&#39;</span><span class="token punctuation">,</span>
    event<span class="token operator">:</span> <span class="token constant">LOCALE</span><span class="token punctuation">.</span><span class="token constant">ZH_CN</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    text<span class="token operator">:</span> <span class="token string">&#39;English&#39;</span><span class="token punctuation">,</span>
    event<span class="token operator">:</span> <span class="token constant">LOCALE</span><span class="token punctuation">.</span><span class="token constant">EN_US</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="主题色配置"><a class="header-anchor" href="#主题色配置" aria-hidden="true">#</a> 主题色配置</h2><p>默认全局主题色配置位于 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/build/config/themeConfig.ts" target="_blank" rel="noopener noreferrer">build/config/glob/themeConfig.ts</a> 内</p><p>只需要修改 primaryColor 为您需要的配色，然后重新执行 <code>yarn serve</code> 即可</p><div class="language-js"><pre><code><span class="token comment">/**
 * less global variable
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> primaryColor <span class="token operator">=</span> <span class="token string">&#39;#0960bd&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="样式配置"><a class="header-anchor" href="#样式配置" aria-hidden="true">#</a> 样式配置</h2><h3 id="css-前缀设置"><a class="header-anchor" href="#css-前缀设置" aria-hidden="true">#</a> css 前缀设置</h3><p>用于修改项目内组件 class 的统一前缀</p><ul><li>在 <a href="https://github.com/anncwb/vue-vben-admin/blob/main/src/settings/designSetting.ts" target="_blank" rel="noopener noreferrer">src/settings/designSetting.ts</a> 内配置</li></ul><div class="language-ts"><pre><code><span class="token keyword">export</span> <span class="token keyword">const</span> prefixCls <span class="token operator">=</span> <span class="token string">&#39;vben&#39;</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>在 <a href="https://github.com/anncwb/vue-vben-admin/blob/main/src/design/var/index.less" target="_blank" rel="noopener noreferrer">src/design/var/index.less</a> 配置 css 前缀</li></ul><div class="language-less"><pre><code><span class="token variable">@namespace<span class="token punctuation">:</span></span> vben<span class="token punctuation">;</span>
</code></pre></div><h3 id="前缀使用"><a class="header-anchor" href="#前缀使用" aria-hidden="true">#</a> 前缀使用</h3><p><strong>在 css 内</strong></p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token comment">/* namespace已经全局注入，不需要额外在引入 */</span>
  <span class="token atrule"><span class="token rule">@prefix-cls</span><span class="token punctuation">:</span> ~&#39;@</span><span class="token punctuation">{</span>namespace<span class="token punctuation">}</span>-app-logo&#39;<span class="token punctuation">;</span>

  <span class="token selector">.@</span><span class="token punctuation">{</span>prefix-cls<span class="token punctuation">}</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>在 vue/ts 内</strong></p><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useDesign <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/hooks/web/useDesign&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> prefixCls <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useDesign</span><span class="token punctuation">(</span><span class="token string">&#39;app-logo&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// prefixCls =&gt; vben-app-logo</span>
</code></pre></div><h2 id="颜色配置"><a class="header-anchor" href="#颜色配置" aria-hidden="true">#</a> 颜色配置</h2><p>用于预设一些颜色数组</p><p>在 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/settings/designSetting.ts" target="_blank" rel="noopener noreferrer">src/settings/designSetting.ts</a> 内配置</p><div class="language-ts"><pre><code><span class="token comment">//  app主题色预设</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">APP_PRESET_COLOR_LIST</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">&#39;#0960bd&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#0084f4&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#009688&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#536dfe&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#ff5c93&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#ee4f12&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#0096c7&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#9c27b0&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#ff9800&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 顶部背景色预设</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">HEADER_PRESET_BG_COLOR_LIST</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">&#39;#ffffff&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#009688&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#5172DC&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#1E9FFF&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#018ffb&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#409eff&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#4e73df&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#e74c3c&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#24292e&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#394664&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#001529&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#383f45&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 左侧菜单背景色预设</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SIDE_BAR_BG_COLOR_LIST</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">&#39;#001529&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#273352&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#ffffff&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#191b24&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#191a23&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#304156&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#001628&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#28333E&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#344058&#39;</span><span class="token punctuation">,</span>
  <span class="token string">&#39;#383f45&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="组件默认参数配置"><a class="header-anchor" href="#组件默认参数配置" aria-hidden="true">#</a> 组件默认参数配置</h2><p>在 <a href="https://github.com/anncwb/vue-vben-admin/tree/main/src/settings/componentSetting.ts" target="_blank" rel="noopener noreferrer">src/settings/componentSetting.ts</a> 内配置</p><div class="language-ts"><pre><code><span class="token comment">// 用于配置某些组件的常规配置，而无需修改组件</span>
<span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> SorterResult <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;../components/Table&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token comment">// 表格配置</span>
  table<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 表格接口请求通用配置，可在组件prop覆盖</span>
    <span class="token comment">// 支持 xxx.xxx.xxx格式</span>
    fetchSetting<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// 传给后台的当前页字段</span>
      pageField<span class="token operator">:</span> <span class="token string">&#39;page&#39;</span><span class="token punctuation">,</span>
      <span class="token comment">// 传给后台的每页显示多少条的字段</span>
      sizeField<span class="token operator">:</span> <span class="token string">&#39;pageSize&#39;</span><span class="token punctuation">,</span>
      <span class="token comment">// 接口返回表格数据的字段</span>
      listField<span class="token operator">:</span> <span class="token string">&#39;items&#39;</span><span class="token punctuation">,</span>
      <span class="token comment">// 接口返回表格总数的字段</span>
      totalField<span class="token operator">:</span> <span class="token string">&#39;total&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 可选的分页选项</span>
    pageSizeOptions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;10&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;50&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;80&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;100&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token comment">//默认每页显示多少条</span>
    defaultPageSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    <span class="token comment">// 默认排序方法</span>
    <span class="token function-variable function">defaultSortFn</span><span class="token operator">:</span> <span class="token punctuation">(</span>sortInfo<span class="token operator">:</span> SorterResult<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> field<span class="token punctuation">,</span> order <span class="token punctuation">}</span> <span class="token operator">=</span> sortInfo<span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token comment">// 排序字段</span>
        field<span class="token punctuation">,</span>
        <span class="token comment">// 排序方式 asc/desc</span>
        order<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 自定义过滤方法</span>
    <span class="token function-variable function">defaultFilterFn</span><span class="token operator">:</span> <span class="token punctuation">(</span>data<span class="token operator">:</span> Partial<span class="token operator">&lt;</span>Recordable<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;&gt;</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> data<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 滚动组件配置</span>
  scrollbar<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 是否使用原生滚动样式</span>
    <span class="token comment">// 开启后，菜单，弹窗，抽屉会使用原生滚动条组件</span>
    native<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></div></div><footer class="page-footer" data-v-4c107763 data-v-ddc19c16><div class="edit" data-v-ddc19c16><div class="edit-link" data-v-ddc19c16 data-v-5c10c4bc><a class="link" href="https://github.com/anncwb/vue-vben-admin-doc/edit/main/guide/settings.md" target="_blank" rel="noopener noreferrer" data-v-5c10c4bc>为此页提供修改建议 <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5c10c4bc><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-ddc19c16><!----></div></footer><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634><div class="container" data-v-0002a634><div class="prev" data-v-0002a634><a class="link" href="/doc-next/guide/" data-v-0002a634><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-0002a634><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-0002a634>开始</span></a></div><div class="next" data-v-0002a634><a class="link" href="/doc-next/guide/router" data-v-0002a634><span class="text" data-v-0002a634>路由</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-0002a634><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"2734edcc\",\"readme.md\":\"e1519bf2\",\"dep_cors.md\":\"204fc85f\",\"dep_dark.md\":\"43a11d42\",\"dep_i18n.md\":\"a802b766\",\"dep_icon.md\":\"439f8e1c\",\"dep_lint.md\":\"e8646b9e\",\"components_auth.md\":\"b02963b8\",\"components_basic.md\":\"fca49067\",\"components_click-out-side.md\":\"88043de3\",\"components_code-editor.md\":\"6afcba77\",\"components_collapse-container.md\":\"b2928273\",\"components_count-down.md\":\"c92778a4\",\"components_count-to.md\":\"c17f243c\",\"components_cropper.md\":\"4a855951\",\"components_desc.md\":\"44431141\",\"components_drawer.md\":\"f8ba528e\",\"components_excel.md\":\"d99f9b91\",\"components_flow-chart.md\":\"edffb78e\",\"components_form.md\":\"047930e8\",\"components_icon.md\":\"0ffa2e82\",\"components_introduction.md\":\"7cb286c9\",\"components_json-preview.md\":\"c1dd06c0\",\"components_lazy-container.md\":\"60c806dc\",\"components_loading.md\":\"06300eaf\",\"components_markdown.md\":\"0c696756\",\"components_modal.md\":\"135caed7\",\"components_page.md\":\"28a90d66\",\"components_pop-confirm-button.md\":\"c26f7c65\",\"components_qrcode.md\":\"dac7ed30\",\"components_scroll-container.md\":\"1dffa01f\",\"components_strength-meter.md\":\"d8a0e073\",\"components_table.md\":\"9ffc20f8\",\"components_time.md\":\"364e4fcd\",\"components_tinymce.md\":\"27726c6d\",\"components_transition.md\":\"1c742571\",\"components_tree.md\":\"9f313e94\",\"components_upload.md\":\"5eaac62a\",\"components_verify.md\":\"d40e7d3d\",\"components_virtual-scroll.md\":\"9df7959b\",\"guide_auth.md\":\"7bab7e41\",\"guide_component.md\":\"35361b68\",\"guide_deploy.md\":\"5e737a9c\",\"guide_design.md\":\"12ad7145\",\"guide_electron.md\":\"c05175be\",\"guide_index.md\":\"773f5681\",\"guide_introduction.md\":\"70896801\",\"guide_lib.md\":\"f35e142b\",\"guide_menu.md\":\"a61b3e0c\",\"guide_mock.md\":\"7ad03e52\",\"guide_router.md\":\"4af7d754\",\"guide_settings.md\":\"15dd5414\",\"other_donate.md\":\"a2bcdefe\",\"other_doubt.md\":\"7d012b2e\",\"other_faq.md\":\"e1457c01\",\"other_server.md\":\"3adeb1fd\",\"components_functional_context-menu.md\":\"c6c1cfd3\",\"components_functional_loading.md\":\"b7278715\",\"components_functional_preview.md\":\"90804e55\",\"components_glob_button.md\":\"29118f06\"}")</script>
    <script type="module" async src="/doc-next/assets/app.9ea9a1e7.js"></script>
  </body>
</html>